<template>
  <div class="bigScreen">
    <div class="middle">
      <MiddleNav @parkChange="parkChange"/>
    </div>
    <div class="sidebarLeft">
      <Sidebar :parkChangeCode="parkChangeCode"/>
    </div>
  </div>
  <top-header v-if="isShowScreen" @navChange="navChange" :nav-index="0"/>
  <screen-left
      v-if="isShowScreen"
      @toLeft="toLeft"
      :isToLeft="isShowLeftScreen"
  />
  <screen-right
      v-if="isShowScreen"
      @toRight="toRight"
      :isToRight="isShowRightScreen"
  />
  <bottom></bottom>
</template>
<script setup>
import MiddleNav from "@/components/threeJsComs/middleNav.vue";
import Sidebar from "@/components/threeJsComs/sidebar.vue";
import TopHeader from "@/components/three/component/bigScreetn/topHeader.vue";
import ScreenLeft from "@/components/three/component/bigScreetn/screenLeft.vue";
import ScreenRight from "@/components/three/component/bigScreetn/screenRight.vue";
import Bottom from "@/components/three/component/bigScreetn/bottom.vue";

const isShowScreen = ref(true);
const isShowLeftScreen = ref(true);
const isShowRightScreen = ref(true);
const toLeft = (flag) => {
  isShowLeftScreen.value = flag;
};
const toRight = (flag) => {
  isShowRightScreen.value = flag;
};
const emit = defineEmits(["navChange"]);
const navChange = (key) => {
  emit("navChange", key);
};
// 园区切换
let parkChangeCode = ref('小海子产业园')
const parkChange = (key) => {
  parkChangeCode.value = key
}
</script>
<style scoped>
.bigScreen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;

  * {
    pointer-events: auto;
  }
}
</style>
